<template>
    <div class="right">
        <div class="sumShopMes" >
            <div class="addHeadShop" v-show="addHeadShow">
                <el-form :model="addForm" ref="addForm">
                    <div class="fl">
                        <span class="formItemName">总部编码：</span>
                        <el-input v-model="addForm.code"  size="small" class="addHeadInp" @change="showArr"></el-input>
                        <span class="formItemName">总部名称：</span>
                        <el-input v-model="addForm.name"  size="small" class="addHeadInp"></el-input>
                        <span class="formItemName">区域：</span>
                        <el-input v-model="addForm.area"  size="small" class="addHeadInp"></el-input>
                        <span class="formItemName">门店状态：</span>
                            <el-select v-model="addForm.status" placeholder="请选择门店状态" style="width: 100px;margin: -2px 0;" size="small">
                              <el-option label="开店" value="true"></el-option>
                              <el-option label="关闭" value="false"></el-option>
                            </el-select>
                    </div>
                    <div class="fl">
                        <span class="formItemName">联系人：</span>
                        <el-input v-model="addForm.man" placeholder="" size="small" style="width: 120px; padding-right: 10px;"></el-input>
                        <span class="formItemName" >电话：</span>
                        <el-input v-model="addForm.phone" ref="phone" @change="phoneCheck" size="small" style="width: 120px; padding-right: 10px;"></el-input>
                        <span class="formItemName">传真：</span>
                        <el-input v-model="addForm.fax" placeholder="" size="small" style="width: 120px; padding-right: 10px;"></el-input>
                    </div>
                    <div class="fl">
                        <span class="formItemName">省份：</span>
                        <el-input v-model="addForm.province" placeholder="" size="small" style="width: 120px; padding-right: 10px;"></el-input>
                        <span class="formItemName">城市：</span>
                        <el-input v-model="addForm.city" placeholder="" size="small" style="width: 120px; padding-right: 10px;"></el-input>
                        <span class="formItemName">区/镇</span>
                        <el-input v-model="addForm.country" placeholder="" size="small" style="width: 120px; padding-right: 10px;"></el-input>
                    </div>
                    <div class="fl">
                        <span class="formItemName">地址：</span>
                        <el-input v-model="addForm.address" placeholder="" size="small"  class="addressInp"></el-input>
                    </div>
                    <div class="btnBox fl">
                        <span style="width: 50%;display: inline-block;">
                            <el-button type="info" @click="changeShow" size="mini" style="margin: 10px 50px;" >取消</el-button>
                        </span>
                        <span style="width: 50%;display: inline-block;">
                            <el-button 
                            type="warning" 
                            size="mini" 
                            ref="headShopCommitBtn" 
                            style="margin: 10px 50px;" 
                            v-if="ableSub"
                            @click="addSumShop">
                            提交</el-button>
                        </span>
                    </div>
                </el-form>
            </div>
            <div class="headShopMesBox" v-show="sumShow">
                <el-container>
                    <div class="sumMesBox">
                        <table class="sumMesTable" :data="sumShopList" v-show="!addHeadShow">
                            <tr>
                                <td>总部编码：{{headShopData.code}}</td>
                                <td>总部名称：{{headShopData.name}}</td>
                                <td>区域：{{headShopData.area}}</td>
                                <td>门店状态：{{headShopData.status = true?'开店':'关闭'}}</td>
                            </tr>
                            <tr>
                                <td>联系人：{{headShopData.man}}</td>
                                <td>电话：{{headShopData.phone}}</td>
                                <td>传真：{{headShopData.fax}}</td>
                            </tr>
                            <tr>
                                <td>省份：{{headShopData.province}}</td>
                                <td>城市：{{headShopData.city}}</td>
                                <td>区/镇：{{headShopData.country}}</td>
                            </tr>
                            <tr>
                                <td>地址：{{headShopData.address}}</td>
                            </tr>
                        </table>
                    </div>
                    
                </el-container>
                <div class="sidePart" v-show="!addHeadShow">
                    <el-button class="sumMesBtn" size="mini">编辑</el-button>
                    <el-button class="sumMesBtn" size="mini">删除</el-button>
                    <el-button class="sumMesBtn" size="mini">增加分店</el-button>
                    <el-button class="sumMesBtn" size="mini">类库管理</el-button>
                </div>
            </div>
            
        </div>

        <!-- 分店信息 -->
        <div class="subbranchesMes" v-show="subShow">
            <el-container>
                <div class="sumMesBox">
                    <table class="sumMesTable">
                        <tr>
                            <td>总部编码：{{subShopList.code}}</td>
                            <td>总部名称：{{subShopList.name}}</td>
                            <td>区域：{{subShopList.area}}</td>
                            <td>门店状态：{{subShopList.status}}</td>
                        </tr>
                        <tr>
                            <td>联系人：{{subShopList.man}}</td>
                            <td>电话：{{subShopList.phone}}</td>
                            <td>传真：{{subShopList.fax}}</td>
                        </tr>
                        <tr>
                            <td>省份：{{subShopList.province}}</td>
                            <td>城市：{{subShopList.city}}</td>
                            <td>区/镇：{{subShopList.country}}</td>
                        </tr>
                        <tr>
                            <td>地址：{{subShopList.address}}</td>
                        </tr>
                    </table>
                </div>
            </el-container>
            <div class="sidePart">
                <el-button class="sumMesBtn" size="mini">编辑</el-button>
                <el-button class="sumMesBtn" size="mini">删除</el-button>
                <el-button class="sumMesBtn" size="mini">增加柜台</el-button>
            </div>
        </div>

        <!-- 柜台信息 -->
        <div class="counterMes" v-show="couShow">
            <el-container>
                <div class="sumMesBox">
                    <table class="lastSumMesTable">
                        <tr>
                            <td>门店名称：{{subShopList.name}}</td>
                            <td>柜台名称：{{couShopData.name}}</td>
                            <td>柜台状态：{{couShopData.status=true?'开店 ':'关闭'}}</td>
                        </tr>
    
                    </table>
                </div>
            </el-container>
            <div class="lastSidePart">
                <el-button class="sumMesBtn" size="mini">编辑</el-button>
                <el-button class="sumMesBtn" size="mini">删除</el-button>
            </div>
        </div>
    </div>
</template>
<script>

    import { mapState } from 'vuex'

    export default {
        name:'sumShopMes',
        data(){
            return{
                allShopData:[],
                headShopData:[],
                subShopList:[],
                couShopData:[],
                addHeadShow:false,
                ableSub:false,
                couShow:false,
                subShow:false,
                sumShow:false,
                // sumShopData:[
                //     {
                //         id:3,
                //         name:'上海总部',
                //         code:'dasd',
                //         area:'上海',
                //         man:'龙龙',
                //         phone:'12346558',
                //         fax:'027-12546582',
                //         province:'上海',
                //         city:'上海',
                //         country:'福熙大道',
                //         address:'上海浦东',
                //         status:true,
                //         kumis:null
                //     }
                // ]

                //添加总店信息
                addForm:{
                    code:'',
                    name:'',
                    area:'',
                    status:'',
                    man:'',
                    phone:'',
                    fax:'',
                    province:'',
                    city:'',
                    country:'',
                    address:'',
                },
            }
        },
        created(){
            this.getInpData();
            this.$store.dispatch('getSumShopList');
            //通过 $shopMessage 监听事件
            this.$shopMessage.$on('showSumData',(meg)=>{
            console.log('监听ID事件',meg);

            //建立一个总店数组
                if(meg.pid == undefined){
                    console.log('现在点击的是总店',meg);
                    this.headShopData = meg;
                    this.sumShow = true;
                    this.subShow = false;
                }

                // console.log('现在的总部数据是',this.headShopData.id,'现在点击的分店pid是',meg.pid)
                // 通过先获取总店的信息来找到分店的信息
                if(this.headShopData.id == meg.pid){
                    console.log('这个是分店');

                    this.subShopList = meg;
                    this.subShow = true;
                    this.couShow = false;
                }

                if(this.headShopData.id == this.subShopList.pid){
                    if(this.subShopList.id == meg.pid){
                        this.couShopData = meg;
                        console.log('柜台的信息是：',this.couShopData)
                        this.couShow = true;
                    }
                }
                // console.log('现在的分店id是',this.subShopData.id,'现在点击的柜台pid是',meg.pid)
            });


            //增加总部表格显示与隐藏
            this.$shopMessage.$on('addHeadBtn', () =>{
                this.addHeadShow = !this.addHeadShow;
            })
        },
        computed:{
            ...mapState(['sumShopList'])
        },
        methods:{

            //显示添加主页表单
            changeShow(){
                console.log('点击取消')
                this.addHeadShow = !this.addHeadShow;
                this.$refs.addForm.resetFields()
            },

            //手机号码验证
            phoneCheck() {
                var phoneTest = this.$refs.phone.value;
                console.log(phoneTest)
                if (!(/^1[3456789]\d{9}$/.test(phoneTest))) {
                    console.log('手机格式错误');
                    alert('手机格式错误')
                    this.ableSub = false;
                    this.$refs.phone.focus();
                } else {
                    console.log('手机格式正确');
                    this.ableSub = true;
                    console.log('ableSub:',this.ableSub)
                }


            },

                //显示表单数据
            showArr(){
                    console.log(this.addForm.code)
                },

                // 点击确定，提交表单数据
                addSumShop(){
                    console.log(this.addForm)
                    // const {data : res} = this.$http.post('/sunnshop/link',this.addForm)
                    // if(res.meta.status != 201){
                    //     console.log('添加总店失败');
                    //     this.$message.error('提交总店失败');
                    // }

                    // this.$message.success('添加总店成功');
                    // this.addHeadShow = false

                    //发送添加总店请求
                    this.$axios({
                        url: '/sunnshop/insertBased',
                        method: 'post',
                        data:this.addForm
                    }).then((res) => {
                        console.log(res);
                        this.addHeadShow = false;
                        this.getInpData();
                        this.addForm = {};
                    })
                    .catch((err) => {
                        console.log(err)
                    });

                    // this.$message.success('添加总店成功');
                    // // this.addHeadShow = false;
                    // this.addForm = {};
                },
                    
                //拿到总店数据
            getInpData(){
                // getSumShop().then(res=>{
                //     console.log(res);
                //     this.sumShopData = res.data.data;
                // }).catch(err=>{
                //     console.log(err)
                // })
            }
        }
    }
</script>
<style>
    *{
        margin: 0;
    }
    .right{
        box-sizing: border-box;
    }
    .sumShopMes{
        overflow: hidden;
        width: 830px;
        box-sizing: border-box;
    }


    .sidePart{
        width: 140px;
        height: 337px;
        border-left: 2px solid #ccc;
        float: left;
        position: relative;
        margin-left: -140px;
        right: -140px;
    }
    .sumMesBtn{
        width: 80px;
        margin: 45px auto !important;
        display: block;
    }
    .el-container{
        width: 100%;
        float: left;
        margin-right: -140px;
    }
    .sumMesBox{
        width: 100%;
        margin-right: 140px;
        border-top: 1px solid #000;
    }
    .sumMesTable{
        width: 100%;
        height: 337px;
        padding: 30px;
        font-size: 16px;
    }
    .sumMesTable tr td{
        width: 25%;
        height: 55px;
        text-align: left;
    }
    .addHeadInp{
        width: 120px; 
        padding-right: 10px;
    }
    .addressInp{
        width: 523px;
        padding-right: 10px;
    }
   .el-input{
        display: inline-block;
    }
    .formItemName{
        display: inline-block;
        font-size: 12px;
        width: 70px;
    }
    .btnBox{
        width: 100%;
    }

    .fl{
        float: left;
    }
    .lastSumMesTable{
        width: 100%;
        padding: 30px;
        font-size: 16px;
    }
    .counterMes{
        width: 830px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .lastSidePart{
        width: 140px;
        border-left: 1px solid #ccc;
        float: left;
        position: relative;
        margin-left: -140px;
        right: -140px;
    }
    .subbranchesMes{
        width: 830px;
        box-sizing: border-box;
        border-bottom: 0;
        border-top: 0;
        overflow: hidden;
    }
</style>